<template>
  <div class="ticket-container">
    <h2>故障处理工单</h2>
    <div class="ticket-actions">
      <select v-model="batchReason">
        <option disabled value="">批量标记故障原因</option>
        <option v-for="reason in reasons" :key="reason" :value="reason">{{ reason }}</option>
      </select>
      <button @click="batchMarkReason" :disabled="!selectedTickets.length || !batchReason">批量标记</button>
    </div>
    <div class="ticket-tabs">
      <button v-for="tab in tabs" :key="tab" :class="{active: currentTab===tab}" @click="currentTab=tab">{{ tab }}</button>
    </div>
    <table class="ticket-table">
      <thead>
        <tr>
          <th><input type="checkbox" @change="toggleAll" :checked="allChecked" /></th>
          <th>故障类型</th>
          <th>用户反馈内容</th>
          <th>上报时间</th>
          <th>状态</th>
          <th>故障原因</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ticket in filteredTickets" :key="ticket.id">
          <td><input type="checkbox" v-model="selectedTickets" :value="ticket.id" /></td>
          <td>{{ ticket.type }}</td>
          <td>{{ ticket.content }}</td>
          <td>{{ ticket.time }}</td>
          <td>{{ ticket.status }}</td>
          <td>{{ ticket.reason || '-' }}</td>
        </tr>
      </tbody>
    </table>
    <div class="ticket-report">
      <h3>故障统计报表</h3>
      <ul>
        <li v-for="(count, reason) in report" :key="reason">{{ reason }}：{{ count }} 次</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const tabs = ['未处理', '处理中', '已解决'];
const currentTab = ref('未处理');
const reasons = ['传感器校准问题', '固件版本过旧', '用户误操作', '其他'];
const batchReason = ref('');
const selectedTickets = ref([]);
const tickets = ref([
  { id: 1, type: '传感器异常', content: '设备无法采集数据', time: '2024-05-01 10:12', status: '未处理', reason: '' },
  { id: 2, type: '信号丢失', content: '数据上传中断', time: '2024-05-02 09:30', status: '处理中', reason: '固件版本过旧' },
  { id: 3, type: '电池故障', content: '设备频繁重启', time: '2024-05-03 14:20', status: '已解决', reason: '传感器校准问题' },
  { id: 4, type: '传感器异常', content: '测量数值异常', time: '2024-05-04 11:05', status: '未处理', reason: '' },
  { id: 5, type: '信号丢失', content: '设备离线', time: '2024-05-05 08:45', status: '未处理', reason: '' },
]);
const filteredTickets = computed(() => tickets.value.filter(t => t.status === currentTab.value));
const allChecked = computed(() => filteredTickets.value.length && filteredTickets.value.every(t => selectedTickets.value.includes(t.id)));
function toggleAll(e) {
  if (e.target.checked) {
    selectedTickets.value = filteredTickets.value.map(t => t.id);
  } else {
    selectedTickets.value = selectedTickets.value.filter(id => !filteredTickets.value.some(t => t.id === id));
  }
}
function batchMarkReason() {
  tickets.value.forEach(t => {
    if (selectedTickets.value.includes(t.id) && t.status === currentTab.value) {
      t.reason = batchReason.value;
    }
  });
  selectedTickets.value = [];
  batchReason.value = '';
}
const report = computed(() => {
  const stat = {};
  tickets.value.forEach(t => {
    if (t.reason) {
      stat[t.reason] = (stat[t.reason] || 0) + 1;
    }
  });
  return stat;
});
</script>

<style scoped>
.ticket-container {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ticket-actions { margin-bottom: 12px; }
.ticket-tabs { margin-bottom: 12px; }
.ticket-tabs button { margin-right: 8px; padding: 6px 16px; border: none; background: #eee; cursor: pointer; }
.ticket-tabs button.active { background: #42b983; color: #fff; }
.ticket-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.ticket-table th, .ticket-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.ticket-table th { background: #f5f5f5; }
.ticket-report { background: #fafafa; padding: 16px; border-radius: 6px; }
</style>